<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../css/public.css">
  <link rel="stylesheet" href="../../css/teacheWork.css">
  <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
  <title>教学工作</title>
</head>

<body>
    <div class="container">
        <div class="box">
            <div class="header">
                <span>师资概况</span>
                <span>图标</span>
            </div>
            <div id="echarts1" style="width: 100%;height:360px;"></div>
        </div>
        <div class="box">
            <div class="header">
                <span>校内外基地实训情况</span>
                <span>图标</span>
            </div>
            <div id="echarts2" style="width: 100%;height:360px;"></div>
        </div>
        <div class="box">
            <div class="header">
                <span>教材情况</span>
                <span>图标</span>
            </div>
            <div id="echarts3" style="width: 100%;height:360px;"></div>
        </div>
        <div class="box">
            <div class="header">
                <span>顶岗实习情况</span>
                <span>图标</span>
            </div>
            <div id="echarts4" style="width: 100%;height:360px;"></div>
        </div>
    </div>
</body>

</html>
<script src="../../layui/layui.all.js"></script>
<script>
  //JavaScript代码区域
  layui.use('element', function () {
    var element = layui.element;
    var $ = layui.jquery;
    
  });

  // 图标初始化
  var myChart = echarts.init(document.getElementById('echarts1'));
  var option1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ['非任课老师', '校内兼课老师', '校内专任老师']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
              name: '非任课老师',
              type: 'bar',
              stack: '总量',
              barWidth: 30,
              itemStyle: {
              color: '#2593FC'
              },
              data: [320, 302, 301, 334, 390]
          },
          {
              name: '校内兼课老师',
              type: 'bar',
              stack: '总量',
              itemStyle: {
              color: '#27C2C1'
              },
              data: [120, 132, 101, 134, 90]
          },
          {
              name: '校内专任老师',
              type: 'bar',
              stack: '总量',
              itemStyle: {
              color: '#38C060'
              },
              data: [220, 182, 191, 234, 290]
          }
        ]
    };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1);

  var myChart2 = echarts.init(document.getElementById('echarts2'));
  var option2 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      bottom: 0,
      data: ['非任课老师', '校内兼课老师', '校内专任老师']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']

    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '非任课老师',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#2593FC'
        },
        data: [320, 302, 301, 334, 390]
      },
      {
        name: '校内兼课老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#27C2C1'
        },
        data: [120, 132, 101, 134, 90]
      },
      {
        name: '校内专任老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#38C060'
        },
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart2.setOption(option2);

  var myChart3 =  echarts.init(document.getElementById('echarts3'));
  var option3 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      bottom: 0,
      data: ['非任课老师', '校内兼课老师', '校内专任老师']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']

    },
    yAxis: [
        {
            name:'册',
            type: 'value'
        },
        {
            name:'占比',
            type: 'value',
            axisLabel: {
                show: true,
                interval: 'auto',//居中显示
                formatter: '{value} %'//以百分比显示
            },
        }
    ],
    series: [
      {
        name: '非任课老师',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        yAxisIndex: 0,
        itemStyle: {
          color: '#2593FC'
        },
        data: [320, 302, 301, 334, 390]
      },
      {
        name: '校内兼课老师',
        type: 'bar',
        stack: '总量',
        yAxisIndex: 0,
        itemStyle: {
          color: '#27C2C1'
        },
        data: [120, 132, 101, 134, 90]
      },
      {
        name: '校内专任老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#38C060'
        },
        data: [220, 182, 191, 234, 290]
      },
      {
        name: '校内专任老师',
        type: 'line',
        stack: '总量',
        yAxisIndex: 1,
        itemStyle: {
          color: '#38C060'
        },
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart3.setOption(option3);

  var myChart4 =  echarts.init(document.getElementById('echarts4'));
  var option4 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      bottom: 0,
      data: ['非任课老师', '校内兼课老师', '校内专任老师']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['2018-2019', '2017-2018', '2016-2017', '2015-2016', '2014-2105']

    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '非任课老师',
        type: 'bar',
        stack: '总量',
        barWidth: 30,
        itemStyle: {
          color: '#2593FC'
        },
        data: [320, 302, 301, 334, 390]
      },
      {
        name: '校内兼课老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#27C2C1'
        },
        data: [120, 132, 101, 134, 90]
      },
      {
        name: '校内专任老师',
        type: 'bar',
        stack: '总量',
        itemStyle: {
          color: '#38C060'
        },
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart4.setOption(option4);
</script>